<template>
  <div class="createPost-container">
    专题产品
    <el-select v-model="templateId" placeholder="模板选择" clearable style="width: 150px" class="filter-item">
      <el-option label="模板1" value="1"/>
      <el-option label="模板2" value="2"/>
    </el-select>

    <div class="main">
      <div class="left">
        <div style="position:relative;height:1100px">
          <img style="position:absolute;left:30px;top:50px;width:482px;"
               src="https://s1.ax1x.com/2020/03/17/8tqhP1.png"/>

          <div class="template1" v-if="templateId==1">

            <div class="theme-title">官方精选</div>
            <div class="dividing-line"></div>

            <div class="part1">
              <div v-for="(product,index) in part1" style="position: relative" @mouseenter="mouseEnter(1,index)" @mouseleave="mouseLeave(1,index)">
                  <div>
                    <img :src="product.coverPic" class="product-img"/>
                    <div style="margin-left: 15px">
                      <div class="product-title">
                        {{product.title}}
                      </div>
                      <div class="product-desc">
                        {{product.description}}
                      </div>
                      <div class="product-price">￥{{product.price}}</div>
                    </div>
                  </div>


                <!-- 遮罩层-->
                <div v-if="product.showBtn"  style="position: absolute;top:0;left:0;width:100px;height:100px;border:1px blue solid;background:rgba(39,60,125,0.5);">
                  <el-button @click="handleDelete(1,index,product)">
                    移除
                  </el-button>
                  <el-upload
                    action="http://localhost:8280/file"
                    :show-file-list="false"
                    :on-success="(response) => uploadImgSuccess(response,1,index,product.id)">
                    <el-button size="small">换图</el-button>
                  </el-upload>
                </div>

              </div>

              <div>
                <div class="product-img" style="cursor:pointer;display: flex;justify-content: center;align-items: center;" @click="showDialog(1)">
                  <img style="width:60px;height:60px" src="@/assets/images/add.png"/>
                </div>
              </div>
            </div>

            <!--中间的间隔-->
            <div class="dividing-zone"></div>

            <div class="part2">
              <div v-for="(product,index) in part2" style="position: relative" @mouseenter="mouseEnter(2,index)" @mouseleave="mouseLeave(2,index)">

                <img :src="product.coverPic" class="long-item" @click="showDialog(2)"/>
                <!-- 遮罩层-->
                <div v-if="product.showBtn"  style="position: absolute;top:0;left:0;width:100px;height:100px;border:1px blue solid;background:rgba(39,60,125,0.5);">
                  <el-button @click="handleDelete(2,index,product)">
                    移除
                  </el-button>
                  <el-upload
                    action="http://localhost:8280/file"
                    :show-file-list="false"
                    :on-success="(response) => uploadImgSuccess(response,2,index,product.id)">
                    <el-button size="small">换图</el-button>
                  </el-upload>
                </div>
              </div>
              <div class="long-item" style="cursor:pointer; display: flex;justify-content: center;align-items: center;" @click="showDialog(2)">
                <img style="width:60px;height:60px" src="@/assets/images/add.png"/>
              </div>
            </div>
          </div>
        </div>


        <div v-if="templateId==2" style="position:absolute;left:62px;top:228px;width: 414px;">
          <div style="font-weight: 600;font-size: 15px;color: #666;margin-top: 10px;margin-left: 20px">热门商品</div>
          <div style="width:100%;height:1px;border-bottom:solid 1px #d9d9d9;margin-bottom: 15px;margin-top: 10px"></div>

          <!--横向滚动-->
          <div class="scrollContainer"
               style="height: 210px;width: 414px; overflow-x:auto;white-space:nowrap;padding-right: 15px;">
            <div style="width: 740px;display: flex;justify-content: flex-start">
              <div style="margin-left: 15px;">
                <div style="border: 1px solid #d9d9d9;width: 130px;height: 130px; border-radius: 5px"></div>
                <div style="margin-left: 10px">
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 600;font-size: 13px;line-height:20px;margin-top: 10px">
                    Apple iphone xs Max 十多个地方个梵蒂冈地方个
                  </div>
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 500;font-size: 11px; color:gray">
                    A12仿生芯片流畅体验 阿斯蒂芬
                  </div>
                  <div style="font-weight: 600;font-size: 13px; color:red;line-height: 20px;">￥5999</div>
                </div>
              </div>

              <div style="margin-left: 15px;">
                <div style="border: 1px solid #d9d9d9;width: 130px;height: 130px; border-radius: 5px"></div>
                <div style="margin-left: 10px">
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 600;font-size: 13px;line-height:20px;margin-top: 10px">
                    Apple iphone xs Max 十多个地方个梵蒂冈地方个
                  </div>
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 500;font-size: 11px; color:gray">
                    A12仿生芯片流畅体验 阿斯蒂芬
                  </div>
                  <div style="font-weight: 600;font-size: 13px; color:red;line-height: 20px;">￥5999</div>
                </div>
              </div>

              <div style="margin-left: 15px;">
                <div style="border: 1px solid #d9d9d9;width: 130px;height: 130px; border-radius: 5px"></div>
                <div style="margin-left: 10px">
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 600;font-size: 13px;line-height:20px;margin-top: 10px">
                    Apple iphone xs Max 十多个地方个梵蒂冈地方个
                  </div>
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 500;font-size: 11px; color:gray">
                    A12仿生芯片流畅体验 阿斯蒂芬
                  </div>
                  <div style="font-weight: 600;font-size: 13px; color:red;line-height: 20px;">￥5999</div>
                </div>
              </div>

              <div style="margin-left: 15px;">
                <div style="border: 1px solid #d9d9d9;width: 130px;height: 130px; border-radius: 5px"></div>
                <div style="margin-left: 10px">
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 600;font-size: 13px;line-height:20px;margin-top: 10px">
                    Apple iphone xs Max 十多个地方个梵蒂冈地方个
                  </div>
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 500;font-size: 11px; color:gray">
                    A12仿生芯片流畅体验 阿斯蒂芬
                  </div>
                  <div style="font-weight: 600;font-size: 13px; color:red;line-height: 20px;">￥5999</div>
                </div>
              </div>

              <div style="margin-left: 15px;">
                <div style="border: 1px solid #d9d9d9;width: 130px;height: 130px; border-radius: 5px"></div>
                <div style="margin-left: 10px">
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 600;font-size: 13px;line-height:20px;margin-top: 10px">
                    Apple iphone xs Max 十多个地方个梵蒂冈地方个
                  </div>
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 500;font-size: 11px; color:gray">
                    A12仿生芯片流畅体验 阿斯蒂芬
                  </div>
                  <div style="font-weight: 600;font-size: 13px; color:red;line-height: 20px;">￥5999</div>
                </div>
              </div>

            </div>

          </div>
          <!--中间的间隔-->
          <!--      <div style="background-color: #e6e6e6;height:10px;margin-top: 20px"></div>-->

          <div style="display: flex;justify-content: center;flex-wrap: wrap;margin-top: 10px">
            <div style="width: 380px;height: 150px;border: 1px solid #d9d9d9;margin: 5px;border-radius: 10px"></div>
            <div style="width: 380px;height: 150px;border: 1px solid #d9d9d9;margin: 5px;border-radius: 10px"></div>
          </div>
        </div>
      </div>

      <div class="right">
        <el-tabs type="card">
          <el-tab-pane label="更多商品">
            <el-button @click="showDialog">
              添加商品
            </el-button>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>


    <!--    添加商品-->
    <el-dialog title="添加商品" :visible.sync="dialogFormVisible" @close="getCoverProduct">
      <div>添加商品吧</div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="ID" prop="id" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="标题">
          <template slot-scope="{row}">
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" width="100px" height="100px">
          </template>
        </el-table-column>
        <el-table-column label="现价" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="scope">

            <el-button size="small" @click="handleAdd(scope.row, scope.row.id)">
              添加
            </el-button>
          </template>

        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.curPageNum" :limit.sync="listQuery.pageSize"
                  @pagination="loadCandidateProducts"/>

    </el-dialog>
  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import Upload from '@/components/Upload/SingleImage3'
  import Sticky from '@/components/Sticky' // 粘性header组件
  import {validURL} from '@/utils/validate'
  import {getCoverProduct, getProducts, addProduct, deleteThemeProduct} from '@/api/theme'
  import Pagination from '@/components/Pagination'
  import {updateThemeProduct} from "../../api/theme"; // secondary package based on el-pagination

  export default {
    name: 'ThemeDetail',
    components: {Tinymce, Upload, Sticky, Pagination},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        templateId: "1",
        part1: [],
        part2: [],
        dialogFormVisible: false,
        listQuery: {
          curPageNum: 1,
          pageSize: 5,
          themeId: 1,
        },
        list: null,
        listLoading: false,
        tableKey: 0,
        total: 0,
        themeId: 1,
        currentModule: 1
      }
    },

    created() {
      this.getCoverProduct(this.themeId)
      if (this.isEdit) {

      } else {

      }

      // Why need to make a copy of this.$route here?
      // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
      // https://github.com/PanJiaChen/vue-element-admin/issues/1221
      this.tempRoute = Object.assign({}, this.$route)
    },
    methods: {
      getCoverProduct() {
        console.log("获取")
        getCoverProduct(this.themeId).then(r1 => {
          this.part1 = r1.data.part1
          this.part2 = r1.data.part2
        })
      },

      showDialog(currentModule) {
        this.currentModule = currentModule
        this.dialogFormVisible = true
        this.loadCandidateProducts()
      },

      loadCandidateProducts() {
        this.listLoading = true
        getProducts(this.listQuery).then(r1 => {
          this.list = r1.data.list
          this.total = r1.data.total
          this.listLoading = false
        })
      },

      handleAdd(row, id) {
        console.log("添加商品", id)
        let data = {
          themeId: this.themeId,
          productId: id,
          coverShow: 1,
          module: this.currentModule

        }
        console.log("数据", data)
        addProduct(data).then(r1 => {
          this.loadCandidateProducts()
          this.$message({
            type: 'success',
            message: '添加成功'
          })
        })
      },

      handleDelete(module, index, product) {
        let data = {
          themeId: product.themeId,
          productId: product.productId
        }
        deleteThemeProduct(data).then(r1 => {
          if (module === 1) {
            this.part1.splice(index, 1)
          } else {
            this.part2.splice(index, 1)
          }
          this.$message({
            type: 'success',
            message: '删除专题商品成功'
          })
        })
      },

      uploadImgSuccess(response, module, index, id) {
        //保存图片地址
        let data = {
          id: id,
          coverPic: response.data.url
        }
        updateThemeProduct(data).then(r1 => {
          if (module === 1) {
            this.part1[index].coverPic = response.data.url
          } else {
            this.part2[index].coverPic = response.data.url
          }
        })
      },
      mouseEnter(module,index){
        if(module===1){

          this.$set(this.part1[index],'showBtn',true)
        }else{
          this.$set(this.part2[index],'showBtn',true)
        }
      },
      mouseLeave(module,index){
        if(module===1){

          this.$set(this.part1[index],'showBtn',false)
        }else{
          this.$set(this.part2[index],'showBtn',false)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .main {
    display: flex;

  }

  .left {
    width: 600px;
  }

  .right {
    margin-top: 100px;
  }

  .template1 {
    height: 712px;
    overflow: scroll;
    overflow-x: hidden;
    position: absolute;
    left: 62px;
    top: 192px;
    width: 414px;
    padding-bottom: 20px;
  }

  //自动移滚动条样式
  ::-webkit-scrollbar {
    overflow-x: hidden;
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 1em;
    background-color: rgba(50, 50, 50, .3);
  }

  ::-webkit-scrollbar-track {
    border-radius: 1em;
    background-color: rgba(50, 50, 50, .1);
  }

  .theme-title {
    font-weight: 600;
    font-size: 15px;
    color: #666;
    margin-top: 10px;
    margin-left: 20px
  }

  .dividing-line {
    width: 100%;
    height: 1px;
    border-bottom: solid 1px #d9d9d9;
    margin-bottom: 15px;
    margin-top: 10px
  }

  .template1 .part1 {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 15px
  }

  .template1 .product-img {
    width: 180px;
    height: 180px;
    border: 1px solid #d9d9d9;
    margin: 5px;
  }

  .template1 .product-title {
    text-overflow: ellipsis;
    width: 165px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
  }

  .template1 .product-desc {
    text-overflow: ellipsis;
    width: 165px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    font-size: 11px;
    color: gray
  }

  .template1 .product-price {
    font-weight: 600;
    font-size: 13px;
    color: red
  }

  .template1 .dividing-zone {
    background-color: #e6e6e6;
    height: 10px;
    margin-top: 20px
  }

  .template1 .long-item {
    width: 380px;
    height: 150px;
    border: 1px solid #d9d9d9;
    margin: 5px;
    border-radius: 10px
  }

  .template1 .part2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px
  }


  .createPost-container {
    position: relative;

    .createPost-main-container {
      padding: 40px 45px 20px 50px;

      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;

        .postInfo-container-item {
          float: left;
        }
      }
    }

    .word-counter {
      width: 40px;
      position: absolute;
      right: 10px;
      top: 0px;
    }
  }

  .news-textarea /deep/ {
    textarea {
      padding-right: 40px;
      resize: none;
      border: none;
      border-radius: 0px;
      border-bottom: 1px solid #bfcbd9;
    }
  }
</style>
